<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>雪碧图--精灵图</title>
		<style type="text/css">
			div,ul,li{
				margin: 0;
				padding: 0;
			}
			.container{
				width: 200px;
				height: 200px;
				background: #eee;
			}
			.container ul{
				list-style: none;
			}
			.container li:nth-of-type(1){
				width: 20px;	/*小图标的宽度*/
				height: 42px;	/*小图标的高度*/
				background: url(img/Sprite.png) -228px -395px no-repeat;
			}
			.container li:nth-of-type(3){
				width: 20px;
				height: 42px;
				background: url(img/Sprite.png) -308px -395px no-repeat #ff0;
			}
		</style>
	</head>
	<body>
		<!--
			雪碧图:
				多个小图标合成在同一张图片,这是一种性能优化的方式
				1.量要取得的小图标的尺寸,设置宽高(跟小图标尺寸刚刚好)
				2.获取X轴和Y轴的距离
				background: url(img/Sprite.png) -308px -395px no-repeat #ff0;
				值分别对应: 图片路径  X轴距离  Y轴距离  是否重复  背景颜色(可选)
				
				X轴距离值: 像素值 | 百分比 | right | center | left
				Y轴距离值: 像素值 | 百分比 | top | center | bottom
		-->
		<div class="container">
			<ul>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</body>
</html>
